<template>
  <div class="main">
    <div class="main-1">
      <div class="main-2">
        <div class="main-3">
          <span style="margin-left: 15px; font-size: 13px;">
            添加广告
          </span>
          <el-button style="margin-right: 15px;" @click="Return">
            返回
          </el-button>
        </div>
        <div class="main-4">
          <div class="main-5">
            <el-form
              ref="ruleFormRef"
              :model="ruleForm"
              :rules="rules"
              label-width="120px"
              class="demo-ruleForm"
              status-icon
            >
              <el-form-item label="广告名称" prop="name">
                <el-input v-model="ruleForm.name" />
              </el-form-item>
              <el-form-item label="广告位置" prop="address">
                <el-select v-model="ruleForm.address" placeholder="请选择">
                  <el-option
                    v-for="item in state.tableData"
                    :label="item.address"
                    :value="item.address"
                  />
                </el-select>
              </el-form-item>
              <el-form-item label="开始时间">
                <el-date-picker
                  v-model="ruleForm.startTime"
                  type="date"
                  placeholder="选择开始时间"
                  :default-value="new Date(2022, 11, 11)"
                />
              </el-form-item>
              <el-form-item label="到期时间">
                <el-date-picker
                  v-model="ruleForm.endTime"
                  type="date"
                  placeholder="选择结束时间"
                  :default-value="new Date(2022, 11, 11)"
                />
              </el-form-item>
              <el-form-item label="上线/下线" prop="type">
                <el-radio-group v-model="ruleForm.state">
                  <el-radio label="上线">上线</el-radio>
                  <el-radio label="下线">下线</el-radio>
                </el-radio-group>
              </el-form-item>
              <el-form-item label="广告图片">
                <!-- <el-upload
                  class="upload-demo"
                  drag
                  multiple
                  @onchange="upload"
                  v-model="formData"
                >
                  <div class="el-upload__text">
                    上传图片
                  </div>
                  <template #tip>
                    <div class="el-upload__tip">
                      图片大小不能超过 500kb
                    </div>
                  </template>
                </el-upload> -->

                <el-upload
                  :limit="2"
                  action="#"
                  list-type="picture"
                  :auto-upload="false"
                  accept="image/png,image/gif,image/jpg,image/jpeg"
                  :on-change="imgSaveToUrl"
                  :show-file-list="false"
                  ref="frontUpload"
                >
                  <img
                    class="icon-img"
                    v-if="imageFrontUrl"
                    :src="imageFrontUrl"
                  />
                  <el-button>上传图片</el-button>
                </el-upload>
              </el-form-item>
              <el-form-item label="广告连接">
                <el-select v-model="ruleForm.link" placeholder="请选择">
                  <el-option label="小程序" value="1" />
                  <el-option label="小程序" value="2" />
                </el-select>
              </el-form-item>
              <el-form-item label="广告备注">
                <el-input type="textarea" v-model="ruleForm.remark"></el-input>
              </el-form-item>
            </el-form>
            <div class="btn">
              <el-button type="primary" @click="add">保存</el-button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ref, reactive, onMounted, watch } from 'vue'
import type { FormInstance, FormRules } from 'element-plus'
import { ElMessage } from 'element-plus'
import { useRouter } from 'vue-router'
import { addAdvice, adviceList, uploadImage } from '../../http/api'
const ruleForm = reactive({
  id: 0,
  name: '',
  address: '',
  endTime: '',
  isDeleted: 0,
  imageUrl: '',
  link: '',
  number: 0,
  numberOfClicks: 0,
  remark: '',
  startTime: '',
  state: '',
})
var state:any = reactive({ tableData: [] })
onMounted(() => {
  adviceList({ page: 1, limit: 1000 }).then((res: any) => {
    state.tableData = res.data
  })
})

const rules = reactive<FormRules>({
  name: [
    { required: true, message: 'Please input Activity name', trigger: 'blur' },
    { min: 3, max: 5, message: 'Length should be 3 to 5', trigger: 'blur' },
  ],
  region: [
    {
      required: true,
      message: '权限组不能为空',
      trigger: ['blur', 'change'],
    },
  ],
})
const router: any = useRouter()
function Return() {
  router.push({ path: 'AdvertisingManagement' })
}
//新增
const add: any = () => {
  console.log(ruleForm)
  addAdvice(ruleForm).then((res) => {
    console.log(res)
  })
}
//图片上传
let formData = new FormData()
const imageFrontUrl = ref('')
var imageUrl = ref('')
function imgSaveToUrl(file: any) {
  console.log(file.raw)
  formData.append("file", file.raw)
  imageFrontUrl.value = URL.createObjectURL(file.raw)
  const fileSize = file.size
  const fileType = file.raw.type
  if (!fileSize) {
    // 是否为空
    ElMessage({
      type: 'error',
      showClose: true,
      message: '无效的文件，请重新选择！',
    })
    logoPicRemove()
    return
  }
  if (fileSize / 1024 / 1024 > 10) {
    // 图片大小
    ElMessage({
      type: 'error',
      showClose: true,
      message: '请上传小于10M的图片！',
    })
    logoPicRemove()
    return
  }
  if (fileType.indexOf('image') === -1) {
    // 如果不是图片格式
    ElMessage({
      type: 'error',
      showClose: true,
      message: '不是有效的图片文件，或格式不支持，请重新选择!',
    })
    logoPicRemove()
    return
  }
  imageUpload()
}
function logoPicRemove() {
  // 清空内容
  imageFrontUrl.value = ''
}

async function imageUpload() {
  await uploadImage(formData).then(res=>{
    console.log(res.data);
    console.log(ruleForm);
    
    ruleForm.imageUrl = String(res.data)
    
  })
}

const radio: any = ref(3)
</script>

<style scoped>
.main {
  width: 100%;
  margin: auto;
  background-color: #f2f2f2;
  height: 1000px;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-1 {
  width: 96%;
  height: 99%;
  margin: auto;
  background-color: white;
  padding: 15px 20px;
  border-radius: 15px;
}
.main-2 {
  height: 100%;
  border: 1px solid #e4e4e4;
  border-radius: 15px;
}
.main-3 {
  width: 100%;
  height: 60px;
  display: flex;
  justify-content: space-between;
  background-color: #f3f3f3;
  border-radius: 15px 15px 0 0;
  align-items: center;
}
.main-4 {
  background-color: white;
}
.main-5 {
  width: 40%;
  margin: auto;
  margin-top: 20px;
}
.btn {
  display: flex;
  justify-content: center;
}
</style>
